

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import type { Ref } from "vue";
import type { IBanner } from "@/mytype";
import { getBannerApi, removeBannerByIdApi, editBannerApi } from "@/api/banner";
import AddBanner from "@/views/Banner/AddBanner.vue";
import { ElMessageBox } from "element-plus";
import type { MessageBoxData } from "element-plus";
/*  reactive对数组不会做响应式 */
// let banner = reactive([])
let banners: Ref<Array<IBanner>> = ref<Array<IBanner>>([]);

function getBanner() {
  getBannerApi().then((data: any) => {
    if (data.code === "200") {
      banners.value = data.data;
    }
  });
}

onMounted(() => {
  getBanner();
});

// 分页相关：
// 1)、每页五条数据。
let pageSize = ref(5);
// 2)、当前页码：
let currentPage = ref(1);

// 当前页的数据：使用计算属性，当页码发生变化，会重新获取当前页的数据
let Bannerlist = computed(() =>
  banners.value.slice(
    (currentPage.value - 1) * pageSize.value,
    currentPage.value * pageSize.value
  )
);
let msg = ref("hello");

/* 控制添加窗口 */
let flash = ref(false);
/* 显示 */
function showAdd() {
  flash.value = true;
}
/* 隐藏 */
function hideAdd() {
  flash.value = false;
}

/* 删除单条数据 */
function removeById(id: string) {
  /* ElMessageBox的返回值为一个 Promise对象   直接返回的是action的值 */
  ElMessageBox({
    title: "提示",
    message: "亲，您真的要删除吗？",
    showCancelButton: true,
  })
    .then((data: MessageBoxData) => {
      if (data == "confirm") {
        // 用户点击了确认按钮
        console.log("id", id);

        removeBannerByIdApi(id).then((res: any) => {
          console.log("删除");

          if (res.code === "200") {
            ElMessageBox({
              title: "提示",
              message: "删除成功!",
            });

            banners.value = banners.value.filter((item) => item.bannerid != id);
          }
        });
      }
    })
    .catch((err) => {
      console.log("err", err);
    });
}

/* 改变状态 */
function editFlag(bannerid: string, newval: string) {
  console.log("bannerid", bannerid);
  console.log("newval", newval);
  editBannerApi({ bannerid, flag: newval }).then((res: any) => {
    if (res.code === "200") {
      ElMessageBox({
        title: "提示",
        message: "修改成功",
      });
    }
  });
}
</script>

<template>
  <div class="banner-box">
    <el-button @click="showAdd">添加轮播图数据</el-button>
    <Teleport to="body">
      <AddBanner
        v-if="flash"
        class="addBanner-box"
        @hide="hideAdd"
        @success="getBanner"
      ></AddBanner>
    </Teleport>
    <el-table :data="Bannerlist" style="width: ">
      <el-table-column prop="" label="序号" width="80">
        <el-table-column type="index" width="80" />
      </el-table-column>
      <el-table-column prop="img" label="图片" width="130">
        <template #default="scope">
          <img :src="scope.row.img" style="width: 100px; height: 60px" />
        </template>
      </el-table-column>

      <el-table-column prop="link" label="连接" />
      <el-table-column prop="alt" label="提示" />
      <el-table-column prop="flag" label="是否应用" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.flag"
            @change="(newval:Boolean)=>editFlag(scope.row.bannerid,newval)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" plain @click="removeById(scope.row.bannerid)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      background
      layout="prev, pager, next"
      :total="banners.length"
    />
  </div>
</template>

<style scoped>
.addBanner-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
</style>